{% extends 'demo.html' %}

{% block title %}登录页{% endblock %}

{% block css %}
    <style>


        .account {
            width: 400px;
            margin-top: 30px;
            margin-left: 350px;
            margin-right: auto;
            border: 1px solid #f0f0f0;
            padding: 10px 30px 30px 30px;
            -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
            box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
            height: 300px;
        }

        .account .title {
            font-size: 25px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 40px;
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .error {
            color: red;
            position: absolute;

        }
    </style>
{% endblock %}

{% block body %}
    <div class="account">
        <div class="title">欢迎注册</div>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" id="username">
                    <p class="error" id="err_username"></p>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="password" id="password">
                    <p class="error" id="err_password"></p>

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="password" id="rePwd">
                    <p class="error" id="err_rePwd"></p>

                </div>
            </div>


        </form>
        <div class="layui-form-item" style="float: right">
            <a href="{% url 'login' %}">已有帐号去登录</a>
            <button class="layui-btn" onclick="register()">注册</button>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>
        function register() {
            var username = $('#username').val()
            var password = $('#password').val()
            var rePwd = $('#rePwd').val()
            var flag = 1

            if (username == '') {
                flag = 0
                $('#err_username').html('用户名不能为空')
            } else {

                $('#err_username').html('')

            }
            if (password == '') {
                flag = 0
                $('#err_password').html('密码不能为空')
            } else {

                $('#err_password').html('')
            }
            if (rePwd == '') {
                flag = 0
                $('#err_rePwd').html('密码不能为空')
            } else {

                if (password != rePwd) {
                    $('#err_rePwd').html('两次密码不一致')
                    flag = 0
                } else {
                    $('#err_rePwd').html('')
                }
            }

            if (flag == 0)

            return

            $.ajax({
                url: '{% url 'register' %}',
                type: 'POST',
                data: {'username': $('#username').val(), 'password': $('#password').val()},
                dataType: 'JSON',
                success: function (res) {
                    if (!res.status) {
                        $('#err_rePwd').html('该用户已存在')
                    } else {
                        $('.error').html("");
                        alert("注册成功！！！请前往登录");
                        location.href = '{% url 'login' %}'
                    }
                }
            })
        }
    </script>
{% endblock %}